<template>
<div class="design-item-list" :class="{heightLight : current == backgroundForm.itemId}">
	<div class="design-background-box">
		<div class="design-background" :class="backgroundForm.adaptive ? 'is-adaptive': 'no-adaptive'" :style="(backgroundForm.adaptive ? {backgroundColor: 'transparent',
    backgroundImage: (backgroundForm.url ? 'url('+backgroundForm.url+')' : 'url(../../../../static/images/img-bg.jpg)')} : '')">
			<img width="100%" v-if="!backgroundForm.adaptive" :src="backgroundForm.url || '../../../../static/images/img-bg.jpg'"/>
		</div>
	</div>
	<div class="design-edit" v-show="(current == backgroundForm.itemId) && backgroundForm.toolbarEdit && !backgroundForm.toolbarComponents">
		<h4 class="edit-title"><span>背景</span></h4>
		<el-form :model="backgroundForm" label-width="80px" class="demo-headerForm">
			<div class="el-form-item">
				<label class="el-form-item__label" style="width: 80px;">
					<div>
						<span>自适应</span> <span></span> 
						<el-popover
							placement="bottom"
							title="标题"
							width="558"
							trigger="hover">
							<div class='design-background-tooltip'>
								<p>适配原则：</p> 
								<p>以750x1624px（即iPhoneX）的背景图作为适配标准尺寸，适配其他机型时会在iPhoneX的基础上等比例缩放，并自动从页面底部及左右对称裁剪掉超出部分内容；</p> 
								<p>请注意不要在背景图底部750x104px区域范围内放置重要内容，此部分内容将在除iPhoneX以外的机型中被裁剪。</p> 
								<p><img width="100%" src='../../../../static/images/img-bg-iphone.png'></p>
							</div>
							<i class="el-icon-question" slot="reference"></i>
						</el-popover>
					</div>
				</label>
				<!-- <i class="el-icon-question"></i> -->
				<div class="el-form-item__content" style="margin-left: 80px;">
					<el-switch v-model="backgroundForm.adaptive" active-text="开" inactive-text="关" @change="changeStatus(backgroundForm)"></el-switch>
				</div>
			</div>
			<el-form-item label="背景图片"> 
				<!-- v-if="backgroundForm.adaptive" -->
					<div class="el-upload-list el-upload-list--picture-card" v-show="backgroundForm.url">
						<div class="el-upload-list__item is-success">
							<img class="el-upload-list__item-thumbnail" width="110" :src="backgroundForm.url">
							<label class="el-upload-list__item-status-label">
									<i class="el-icon-upload-success el-icon-check"></i>
							</label>
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-delete">
									<i class="el-icon-delete" @click.stop="handleRemove(backgroundForm)"></i>
								</span>
							</span>
						</div>
					</div>
					<el-upload
						class="upload-demo"
						:action="this.globalVar.uploadFile"
						:show-file-list="false"
						accept="image/jpeg,image/jpg,image/png"
						:on-success="imageUploadSuccess"
						:before-upload="beforeUpload"
						v-show="!backgroundForm.url">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">建议图片尺寸750x1206，图片大小100kb以内</div>
					</el-upload>
			</el-form-item>
		</el-form>
	</div>
</div>
</template>
<script>
export default {
    data () {
        return {}
    },
    props:{
		backgroundForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String
    },
    created(){},
	methods:{
		imageUploadSuccess(res) {
			this.backgroundForm.url = res.url;
			this.$emit("childChange", this.backgroundForm);
		},
		beforeUpload(file) {
			// console.log('file.size', file.size)
			// var imageSize = file.size / 1024 * 100 < 100;//上传图片大小不超过1M
			// if (!imageSize) {
			// 	this.$message.error('上传封面大小不能超过 1MB!');
			// }
			// return imageSize;
		},
		handleRemove() {
			this.backgroundForm.url = '';
			this.$emit("childChange", this.backgroundForm);
		},
		changeStatus(form){
			this.$emit("childChange",form);
			// console.log('子form',form);
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "../../../../static/css/style.less";
@import "../../../../static/css/element.less";
</style>